import './css/header.less';

export class Headers extends React.Component {
    constructor(props) {
        super(props);
    };

    getChildContext() {
        let self = this;
        return {
            languages: self.props.languages,
        };
    }

    componentDidMount() {
        let self = this;
        this.setState({
            refs: self.refs,
        });
    }

    componentWillUnmount() {

    }

    render() {
        return (<header>
                <Antd.Row type="flex" justify="center">
                    <Antd.Col xl={23}>
                        <Antd.Row>
                            <Antd.Col span={3}>
                                <img src={require('./images/logo.png')} className="my-img-fluid my-mt-15" alt=""/>
                            </Antd.Col>
                            <Antd.Col span={10}>
                                <div className="header-menu">
                                    <ReactRouterDom.NavLink to="/" activeClassName="active">
                                        菜单1
                                    </ReactRouterDom.NavLink>
                                    <ReactRouterDom.NavLink to="/book" activeClassName="active">
                                        菜单2
                                    </ReactRouterDom.NavLink>
                                </div>
                            </Antd.Col>
                            <Antd.Col span={11} className="my-text-right my-mt-15">
                                <Antd.Badge status="error" offset={[-5, -10]}>
                                    <span className="my-display-inline-block my-vertical-align-middle my-mr">
                                        <Antd.Icon type="mail" className="my-font-size-18"/>
                                    </span>
                                </Antd.Badge>
                                <Antd.Badge status="error" offset={[-5, -10]}>
                                    <span className="my-display-inline-block my-vertical-align-middle my-mr">
                                        <Antd.Icon type="bell" className="my-font-size-18"/>
                                    </span>
                                </Antd.Badge>
                                <span className="my-display-inline-block">
                                    <span
                                        className="my-display-inline-block my-vertical-align-middle my-mr">您好，admin用户</span>
                                    <a href="javascript:void(0)">
                                        <img src={require('./images/oval.png')} alt=""/>
                                    </a>
                                </span>
                            </Antd.Col>
                        </Antd.Row>
                    </Antd.Col>
                </Antd.Row>
            </header>
        );
    };
}


